<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/home/test' }">考试</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="underway">
            <div class="underway-title" style="text-align: left ;">
                正在进行的考试
            </div>
            <div class="content" v-for="item in typeData">
                <div class="left">
                    <div class="img">
                        <img src="../../assets/images/Tests/test-1.png" alt="">
                    </div>
                    <div class="text">
                        <p class="p1">
                            {{ item.title }}
                            <span>可参加</span>
                        </p>
                        <p class="p2">
                            <!-- {{item.start-time}}~{{item.end-time}} -->
                            <span>
                                <img src="../../assets/images/Tests/clock.png" alt="">
                                限时{{item.durations}}分钟</span>
                        </p>
                        <!-- <div class="clock">
                            
                        </div> -->
                    </div>
                </div>
                <div class="right">
                    <el-button @click="goTest(item._id)">进入</el-button>
                </div>
            </div>
        </div>
        <!-- 已完成考试 -->
        <div class="finished">
            <div class="finished-title" style="text-align: left ;">
                已完成的考试
            </div>
            <div class="content" v-for="item in testedData">
                <div class="left">
                    <div class="img">
                        <img src="../../assets/images/Tests/test-1.png" alt="">
                    </div>
                    <div class="text">
                        <p class="p1">
                            {{ item.testId.title }}
                            <span style="background-color: #7c7c7c">已完成</span>
                        </p>
                        <p class="p2">
                            <!-- {{item.start-time}}~{{item.end-time}} -->
                            <span>
                                <img src="../../assets/images/Tests/clock.png" alt="">
                                限时{{item.durations}}分钟</span>
                        </p>
                        <!-- <div class="clock">
                            
                        </div> -->
                    </div>
                </div>
                <div class="right">
                    <el-button>查看</el-button>
                </div>
            </div>
            <!-- 已完成的考试 -->

        </div>
        <!-- <div class="finished">

        </div> -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            _id:"",
            typeData:[],
            testedData:[]
        };
    },
    methods: {
        goTest(_id){
            console.log("去考试",_id);
            this.$router.push(
                {
                    path:"/start",
                    query:{
                        _id:_id
                    }
                }
            )
        }
    },
    async created() {
        this._id = this.$route.query.id;
        const res = await this.$api.student.getTestsByTypesIdApi({_id:this._id});
        this.typeData = res.data;
        //获取当前登录用户的所有已考试题
        const testedRes = await this.$api.student.getTestedsByStuIdApi();
        this.testedData = testedRes.data;
        console.log("testedRes",testedRes);
        // console.log("this.$route.query",);
    }
};
</script>

<style lang="scss" scoped>
.breadcrumb {
    width: 1000px;
    height: 20px;
    margin: auto;
}

.underway {
    width: 1000px;
    //height: 500px;
    margin: auto;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
    border-radius: 8px;

    .underway-title {
        width: 800px;
        height: 50px;
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
        margin-left: 20px;
        padding-top: 10px;
    }

    .content {
        width: 900px;
        height: 120px;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-top: 10px;

        .left {
            width: 500px;
            height: 120px;
            display: flex;

            .img {
                width: 150px;
                height: 120px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                width: 350px;
                height: 120px;
                margin-left: 10px;
                .p1{
                    text-align: left;
                    font-size: 13px;
                    color: #333333;
                    span{
                        background-color: #6966eb;
                        color: white;
                        margin-left: 15px;
                        padding: 1px;
                    }
                }
                .p2{
                    text-align: left;
                    font-size: 12px;
                    color: #666666;
                    span{
                        margin-left: 25px;
                        img{
                            width: 10px;
                            height: 10px;

                        }
                    }
                }
            }
        }

        .right {
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin-top: 30px;
        }
    }
        .content {
        width: 900px;
        height: 120px;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-top: 10px;

        .left {
            width: 500px;
            height: 120px;
            display: flex;

            .img {
                width: 150px;
                height: 120px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                width: 350px;
                height: 120px;
                margin-left: 10px;
                .p1{
                    text-align: left;
                    font-size: 13px;
                    color: #333333;
                    span{
                        background-color: #6966eb;
                        color: white;
                        margin-left: 15px;
                        padding: 1px;
                    }
                }
                .p2{
                    text-align: left;
                    font-size: 12px;
                    color: #666666;
                    span{
                        margin-left: 25px;
                        img{
                            width: 10px;
                            height: 10px;

                        }
                    }
                }
            }
        }

        .right {
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin-top: 30px;
        }
    }
}
.finished {
    width: 1000px;
    margin: auto;
    background-color: #ffffff;
    //box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
    border-radius: 8px;

    .finished-title {
        width: 800px;
        height: 50px;
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
        margin-left: 20px;
        padding-top: 10px;
    }

    .content {
        width: 900px;
        height: 120px;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-top: 10px;

        .left {
            width: 500px;
            height: 120px;
            display: flex;

            .img {
                width: 150px;
                height: 120px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                width: 350px;
                height: 120px;
                margin-left: 10px;
                .p1{
                    text-align: left;
                    font-size: 13px;
                    color: #333333;
                    span{
                        background-color: #7c7c7c;
                        color: white;
                        margin-left: 15px;
                        padding: 1px;
                    }
                }
                .p2{
                    text-align: left;
                    font-size: 12px;
                    color: #666666;
                    span{
                        margin-left: 25px;
                        img{
                            width: 10px;
                            height: 10px;

                        }
                    }
                }
            }
        }

        .right {
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin-top: 30px;
        }
    }
        .content {
        width: 900px;
        height: 120px;
        display: flex;
        justify-content: space-between;
        margin-left: 20px;
        margin-top: 10px;

        .left {
            width: 500px;
            height: 120px;
            display: flex;

            .img {
                width: 150px;
                height: 120px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                width: 350px;
                height: 120px;
                margin-left: 10px;
                .p1{
                    text-align: left;
                    font-size: 13px;
                    color: #333333;
                    span{
                        background-color: #6966eb;
                        color: white;
                        margin-left: 15px;
                        padding: 1px;
                    }
                }
                .p2{
                    text-align: left;
                    font-size: 12px;
                    color: #666666;
                    span{
                        margin-left: 25px;
                        img{
                            width: 10px;
                            height: 10px;

                        }
                    }
                }
            }
        }

        .right {
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin-top: 30px;
        }
    }
}

.finished {
    width: 1000px;
    margin: auto;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(174, 174, 174, 0.44);
    border-radius: 8px;
    margin-top: 20px;
}
</style>